<template>
  <div class="coment-container">
      <h3>发表评论</h3>
      <hr>
        <textarea v-model="msg" name="" id="" cols="20" rows="5" placeholder="请输入要bb的内容(最多120字)" maxlength="120"></textarea>
        <mt-button type="primary" size="large" @click="comment">发表评论</mt-button>
        <div class="content" v-for="(item,i) in coments" :key="item.add_time">
          <div class="coment-title">第{{i+1}}楼:用户 {{item.user_name}}&nbsp;&nbsp;发表时间:{{item.add_time | dataFormat}}</div>
          <div class="coment-content">{{item.content}}</div>
        </div>
         <mt-button type="danger" size="large" @click="addmore">加载更多</mt-button>
  </div>
</template>
<script>
import {Toast} from "mint-ui"
export default {
  data(){
    return {
      pageindex:1,
      coments:[],
      msg:""
    }
  },
  created(){
    this.getComent()
  },
  methods:{
    addmore(){
  this.pageindex++;
  this.getComent();
    },
    comment(){
      if(this.msg.trim()<=0){
        return Toast("评论部能为空")
      }
    this.$http.post("api/postcomment/"+this.id,{coment:this.msg.trim()}).then(result=>{
       this.coments.unshift({
         user_name:"匿名用户",
         add_time:Date.now(),
         content:this.msg
       })
       this.msg="";
    })
    },
    getComent(){
      this.$http.get('api/getcomments/'+this.id+'?pageindex='+this.pageindex).then(result=>{
           if(result.body.status===0){
            this.coments=this.coments.concat(result.body.message)
            
           }
      })
    }
  },
  props:["id"]
}
</script>
<style>
.coment-container textarea{
   margin: 0;
   font-size: 14px;
}
.coment-container .content .coment-title{
  background-color: #CBCBCB;
  font-size: 12px;
   line-height: 30px;
}
.coment-container .content .coment-content{
    line-height: 30px;
    text-indent: 2em;
    font-size: 12px;
}
</style>
